/***************************************************************************
 *   This is a part of the NextCAD Web APP.                                *
 *   Copyright (C) AMCAX, All rights reserved.                             *
 ***************************************************************************/

// import { Alert, Button } from 'antd';
import i18n from 'i18next';

import { CommandDialog } from '@amcax/base';
import { CommandLabeledItemWrapper } from '@app-cad/common/components/command-form/item-wrapper';
import { CurvedBaseCommand, CurvedCmdDialogParams } from '@app-cad/types';
import { Select } from 'antd';
import { useState, useEffect } from 'react';
import { MoveDistance } from './distance';
import { MovePoint } from './point';
import { MoveFrame } from './frame';

function MoveDialog({ title, onClose, props }: CurvedCmdDialogParams) {
  const [mode, setMode] = useState<'vector' | 'point' | 'frame'>('vector');
  const [base, setBase] = useState<any>();

  const [editProps, setEditProps] = useState<any>();
  const [editDxid, setEditDxid] = useState<string>();

  const [originMode, setOriginMode] = useState<'vector' | 'point' | 'frame'>(
    'vector',
  );
  const [originEditProps, setOriginEditProps] = useState<any>();

  useEffect(() => {
    setMode(props?.params?.mode ?? 'vector');
    setBase(props?.params?.base);
    setEditProps(props);
    setEditDxid(props?.shape);
    setOriginMode(props?.params?.mode ?? 'vector');
    setOriginEditProps(props);
  }, [props?.shape]);

  return (
    <CommandDialog
      title={title}
      onClose={onClose}
      placement='topLeft'
    >
      <CommandLabeledItemWrapper
        className='mt-5 px-5'
        label='平移类型'
      >
        <Select
          options={[
            { value: 'vector', label: '方向、距离' },
            { value: 'point', label: '点到点' },
            { value: 'frame', label: '坐标' },
          ]}
          value={mode}
          onChange={(val) => {
            if (val !== originMode) {
              setEditProps(null);
            } else {
              setEditProps(originEditProps);
            }
            setMode(val);
          }}
        />
      </CommandLabeledItemWrapper>
      {mode === 'vector' && (
        <MoveDistance
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
          base={base}
        />
      )}
      {mode === 'point' && (
        <MovePoint
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
          base={base}
        />
      )}
      {mode === 'frame' && (
        <MoveFrame
          props={editProps}
          onClose={onClose}
          editDxid={editDxid}
          base={base}
        />
      )}
    </CommandDialog>
  );
}

export const cmdMove: CurvedBaseCommand = {
  id: 'CmdMove',
  label: 'command.move',
  icon: 'commands/curved/move',
  create: (label: string, onClose: () => void, props: any) => (
    <MoveDialog
      title={i18n.t(label)}
      onClose={onClose}
      props={props}
    />
  ),
};
